import React, { Component } from 'react'
import { connect, MapStateToPropsParam } from 'react-redux'
import { addMovieAction, addMovieAsyncAction, getMovieAsyncAction, setLoadingAction } from '../redux/actions/movieAction'
import { IMovieState } from '../redux/typings/movieInterface'
import { ICondition, IMovie } from '../typings/interface'

interface IProps {
  addMovie:(movie:IMovie)=>void,
  getMovie:(condition:ICondition)=>void,
  setLoading:(status:boolean)=>void,
  movieState:IMovieState
}
interface IState {
}

class ReduxTest extends Component<IProps,IState> {
  state:IState = {
  }

  render() {
    const {movieState} = this.props
    return (
      <div>
        <h3>reduxTest</h3>
        <button onClick={this.addMovie}>添加</button>
        <button onClick={this.getMovie}>获取</button>
        <button onClick={this.setLoading}>设置loading</button>
        <ul>
          电影列表：
          {movieState.list.map((item, index)=>{
            return (
              <li key={index}>{item.name}</li>
            )
          })}
        </ul>
      </div>
    )
  }

  addMovie = ():void => {
    const movieObj = {
      name:'醉拳2',
      types:['动作','武侠'],
      areas: ['中国大陆'], 
      timeLong: 100, 
      isHot:true, 
      isComing:false, 
      isClassic: true
    }
    this.props.addMovie(movieObj)
  }

  setLoading = () => {
    this.props.setLoading(true)
  }
  getMovie = ():void => {
    this.props.getMovie({})
  } 
}



export default connect(
  (state:any) => ({
    movieState:state.movieState
  }),
  (dispatch:any) => ({
    addMovie:(payload:IMovie) => dispatch(addMovieAsyncAction(payload)),
    setLoading:(payload:boolean) => dispatch(setLoadingAction(payload)),
    getMovie:(payload:ICondition) => dispatch(getMovieAsyncAction(payload))
  })
)(ReduxTest)

